<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Notepad</title>

    <!-- bootstrap -->
    <link rel="stylesheet" href="./assets/css/bootstrap.min.css" />

    <!-- animate.css -->
    <link rel="stylesheet" href="./assets/css/animate.min.css" />

    <!-- 重置样式 -->
    <link rel="stylesheet/less" href="./assets/css/reset.less" />

    <!-- 公共样式 -->
    <link rel="stylesheet/less" href="./assets/css/common.less" />

    <!-- 页面独立的 -->
    <link rel="stylesheet/less" href="./assets/css/UserProfile.less" />

    <!-- mui -->
    <link rel="stylesheet" href="./assets/plugins/mui/css/mui.min.css" />
    <!--引入城市插件  -->
    <link rel="stylesheet" href="./assets/plugins/city-picker/city-picker.css" />
</head>

<body>
    <!-- 用户信息 -->
    <div class="user">
        <div class="avatar wow fadeInUp">
            <img src="./assets/images/avatar.png" style="width: 100%; height: 100%; object-fit: cover;" />
        </div>
    </div>

    <form class="profile wow fadeInUp" data-wow-delay="200ms" method="post" id="orSubmitEvent">
        <div class="form-group">
            <label for="nickname">昵称</label>
            <input type="text" class="form-control" id="nickname" name='nickname' placeholder="请输入昵称" />
        </div>

        <div class="form-group">
            <label for="mobile">手机号码</label>
            <input type="text" class="form-control" id="mobile" name="mobile" placeholder="请输入手机号码" required />
        </div>

        <div class="form-group">
            <label for="password">密码</label>
            <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码" required />
        </div>

        <div class="form-group">
            <label for="gender">性别</label>
            <select class="form-control" name="gender" id="gender">
                <option>请选择</option>
                <option value="0">保密</option>
                <option value="1">男</option>
                <option value="2">女</option>

            </select>
        </div>


        <div class="form-group">
            <label for="city">城市</label>
            <div style="position:relative;">
                <input readonly type="text" data-toggle="city-picker" id="city" >
            </div>
        </div>

        <div class="form-group">
            <label for="address">详细地址</label>
            <input type="text" class="form-control" id="address" name="address" placeholder="请输入详细地址" required />
        </div>
        <!-- 上传 -->
        <div class="form-group" style="display: none;">
            <label for="avatar">头像</label>
            <input type="file" class="form-control" id="avatar" name="avatar" />
        </div>
        <div class="action">
            <button class="btn">提交</button>
        </div>
    </form>
</body>

</html>
<!-- 解析less的文件 -->
<script src="./assets/js/less.min.js"></script>

<!-- jquery  -->
<script src="./assets/js/jquery.min.js"></script>


<!-- bootstrap -->
<script src="./assets/js/bootstrap.min.js"></script>

<!-- wow.js -->
<script src="./assets/js/wow.min.js"></script>
<!-- mui -->
<script src="./assets/plugins/mui/js/mui.min.js"></script>
<!-- 引入接口插件 -->
<script src="./assets/plugins/axios/axios.min.js"></script>
<script src="./assets/plugins/axios/request.js"></script>

<!-- 引入Cookie -->
<script src="./assets/plugins/cookie.js"></script>
<!-- 城市插件js -->
<script src="./assets/plugins/city-picker/city-picker.data.min.js"></script>
<script src="./assets/plugins/city-picker/city-picker.min.js"></script>
<!-- 引入校验 -->
<script src="./assets/helpers.js"></script>

<script>
    //实例化wow.js
    new WOW().init();
    

    
    if (JSON.stringify(business) != "{}") {
        business = JSON.parse(business)
        $(".avatar img").attr('src', business.avatar)
        $("#nickname").val(business.nickname)
        $("#mobile").val(business.mobile)
        $("#gender").val(business.gender)
        $("#address").val(business.address)

        $('#city').citypicker({
            province: business.province,
            city: business.city,
            district: business.district,
        });


    }





    //图片上传

    $(".avatar img").click(function () {
        $("#avatar").click()
    })
    $("#avatar").change(function (e) {
        let file = document.getElementById("avatar").files[0]
        let src = URL.createObjectURL(file)
        $(".avatar img").attr('src',src)
        console.log(src);

        

    })

    //表单提交
    $("#orSubmitEvent").submit(async function(e) {
        e.preventDefault();
        if(!$("#nickname").val()){
            mui.toast("昵称不能为空")
            return false
        }
        //from entries()遍历访问 FormData 表单中的键值对 ,object.fromentries() 静态方法将键值对列表转换为一个对象。
        let formData =new FormData(document.getElementById("orSubmitEvent"))  // 表单数据
        
          
        //let data = Object.fromEntries(formData.entries())
        // var fields = $("#orSubmitEvent").serializeArray()
        // $.each(fields, function (i, field) {
        //     console.log(field.value);
        //     console.log(field.name);  
            
        // });
        let val = Object.fromEntries(formData.entries())

        let data = {
           id : business.id,
           nickname : val.nickname,
           mobile : val.mobile,
           gender : val.gender,

        }
        //看看是否必须密码
        if(val.password){
            data.password = val.password

        }
        //判断是否上传头像
        if (val.avatar.size > 0) {
            data.avatar = val.avatar
        }

        //获取城市的地区码
        var citypicker = $("#city").data("citypicker");
        var code = citypicker.getCode("district") || citypicker.geiCode("city") || citypicker.geiCode("province");
        data.region= code;

        let result = await UPLOAD({ url:'business/profile', params:data })

        

        if(result.code == 1){
            cookie.set("business",JSON.stringify(result.data))
            mui.toast("result.msg")
            setInterval (() => {
                location.href = "user.html"
            },1000)
        } else {
            mui.toast(result.msg)
        }



    })
        

      
        




</script>